import React, { useEffect, useState } from 'react'
import { Tabs, ConfigProvider } from 'antd';

import UnderTask from '../../component/underTask'
import EditExpression from '../../component/editExpression'
import PushLog from '../../component/pushLog'

import styles from './index.module.css'


function TaskManage() {
    const data = [
        {
            key: 1,
            label: '当前任务',
            children: <UnderTask />
        },
        {
            key: 2,
            label: 'cron表达式',
            children: <EditExpression />
        },
        {
            key: 3,
            label: '任务日志',
            children: <PushLog />
        },
    ];


    //[]空数组相当于componentDidMount
    useEffect(() => {
        initData()
        return () => {
        }
    }, []);

    function initData() {

    }

    function onChange(key) {

    };

    return (
        <ConfigProvider theme={{
            components: {
                Tabs: {
                    colorPrimaryBorder: '#4096ff',
                    colorBgContainer: '#4096ff',
                    itemSelectedColor: "white",
                },
            }
        }}>
            <Tabs
                type={'card'}
                tabBarGutter={3}
                indicator={1}
                animated={true}
                size={"middle"}
                className={styles.tab}
                onChange={onChange}
                items={data} />
        </ConfigProvider>
    )
}

export default TaskManage;
